<template>
    <div class="component-count-down">
        <p class="component-count-down__content" v-if='diff'>{{ diff | secondFormat }}</p>
        <p class="component-count-down__content" v-else>{{ days }}</p>
    </div>
</template>

<script>
    import moment from 'moment'
    import secondFormat from '../filters/filter-secondFormat'

    export default {
        filters:{
            secondFormat,
        },
        props:{
            date:{
                type: [String,Number],
                default: false
            },
        },
        data() {
            return {
                diff:'',
                days:''
            }
        },
        methods:{
            countDown(){
                setTimeout(()=>{
                    if(this.diff > 1){
                        this.diff = this.diff - 1
                        this.countDown()
                    }
                    else{
                        this.diff = 0
                    }
                },1000)
            }
        },
        created(){
            let now = moment()
            let time = moment(this.date)
            let diffDays

            diffDays = Math.ceil(time.diff(now,'days',true))
            console.log(diffDays)
            if(diffDays < 0){
                this.days = '0天'
                return
            }

            if(diffDays > 1){
                this.days = diffDays + '天'
                return 
            }

            if(time > now){
                this.diff = (time - now) / 1000
            }
            else{
                this.diff = 0
                this.days = '0天'
            }
            this.countDown()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
</style>


